<!--
  @Descripttion:：功能描述
  @Author：yejianbo
  @Date：2022年08月05日 08:53:23
-->
<template>
  <section class="iframePage">
    <div v-if="showMenu" class="header">
      <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    </div>
    <iframe class="page" :style="showMenu ? 'height: calc(100vh - 60px)' : 'height: 100%'" frameborder="0" :src="pageUrl" />
  </section>
</template>

<script>
export default {
  // 组件名称
  name: 'IframePage',
  // 组件状态值
  data() {
    return {
      pageUrl: '',
      showMenu: false
    }
  },
  created() {
    const { pageUrl, showMenu = false } = this.$route.query
    this.pageUrl = process.env.VUE_APP_BASE_API + `static/${pageUrl}.html`
    this.showMenu = showMenu
  },
  mounted() {},
  // 组件方法
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.iframePage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header {
    position: relative;
    border-bottom: 1px solid #e3e3e3;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
  }
  .page {
    position: relative;
    width: 100%;
  }
}
</style>
